<template>
    <fieldset>
        <legend>插槽父组件</legend>
        <SlotCom>
            <template v-slot:header>
                <h1 class="header">顶部</h1>
            </template>
            <template v-slot:main>
                <h1 class="main">主体</h1>
            </template>
            <template v-slot:footer>
                <h1 class="footer">底部</h1>
            </template>
            <h1>anyone but you's so wrong</h1>

            <template v-slot:list="{ac}">
                <ul>
                    <li v-for="(item,index) in ac" :key="index">{{item}}</li>
                </ul>
            </template>
        </SlotCom>
    </fieldset>
</template>
<script>
    //插槽的作用
    //1.组件封装提高复用性
    //2.自定义灵活的扩展组件结构

    //具名插槽
    //有名字的插槽内容 slot也要加上对应的名字
    import SlotCom from "./04.插槽.vue"
    export default {
        components: {
            SlotCom
        }
    }
</script>